<script setup lang='ts'>
import { reactive, watch, ref } from 'vue'
import { useRoute } from 'vue-router'
import TabBar from './TabBar.vue'
import { ITabList } from '@/components/TabBar.vue'
const route = useRoute()
const tabBar :Array<ITabList> = reactive[
  {title: '首页', to: '/home', icon: 'fa-home'}
]
const activeRoute = ref(0)
watch(
  route, (val:any) => {
    console.log('val', val)
  }
)
const handleChange = (v: number) => {
  console.log('tab value @change:', activeRoute.value)
}
onBeforeMount(() => {
  console.log('onBeforeMount')
})
onMounted(() => {
  console.log('route', route)
})

  
</script>
<template>
  <div>
    <keep-alive v-if="route.mate.keepAlive">
      <router-view></router-view>
    </keep-alive>
    <router-view v-else></router-view>
  </div>
  <div>
    <TabBar />
  </div>
</template>
<style scoped lang='scss'>
</style>
